<template>
	<view class="container">
		<!-- Logo区域 -->
		<view class="logo-section">
			<text class="logo-icon">🐾</text>
			<text class="app-name">宠物上门喂养服务</text>
			<text class="app-slogan">让爱宠得到最好的照顾</text>
		</view>

		<!-- 角色选择 -->
		<view class="role-tabs">
			<view 
				class="role-tab" 
				:class="{active: userRole === 'owner'}" 
				@click="switchRole('owner')">
				<text class="role-icon">👤</text>
				<text class="role-name">宠物主人</text>
			</view>
			<view 
				class="role-tab" 
				:class="{active: userRole === 'provider'}" 
				@click="switchRole('provider')">
				<text class="role-icon">💼</text>
				<text class="role-name">喂养师</text>
			</view>
		</view>

		<!-- 登录表单 -->
		<view class="form-section">
			<view class="input-group">
				<text class="input-label">手机号</text>
				<input 
					class="input-field" 
					v-model="phone" 
					placeholder="请输入手机号" 
					type="number"
					maxlength="11" />
			</view>

			<view class="input-group">
				<text class="input-label">验证码</text>
				<view class="code-input-wrapper">
					<input 
						class="input-field code-input" 
						v-model="code" 
						placeholder="请输入验证码" 
						type="number"
						maxlength="6" />
					<button 
						class="send-code-btn" 
						:disabled="codeSending || countdown > 0"
						@click="sendCode">
						{{ countdown > 0 ? countdown + 's' : '获取验证码' }}
					</button>
				</view>
			</view>

			<!-- 喂养师提示 -->
			<view class="provider-tip" v-if="userRole === 'provider'">
				<text class="tip-icon">ℹ️</text>
				<text class="tip-text">首次登录需完成资质认证审核</text>
			</view>
		</view>

		<!-- 登录按钮 -->
		<button class="login-btn" @click="handleLogin">
			登录 / 注册
		</button>

		<!-- 协议勾选 -->
		<view class="agreement">
			<checkbox-group @change="agreeChange">
				<label class="agreement-label">
					<checkbox value="agree" :checked="agreed" />
					<text class="agreement-text">我已阅读并同意</text>
					<text class="agreement-link">《用户协议》</text>
					<text class="agreement-text">和</text>
					<text class="agreement-link">《隐私政策》</text>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userRole: 'owner', // owner: 宠物主人, provider: 喂养师
			phone: '',
			code: '',
			agreed: false,
			codeSending: false,
			countdown: 0,
			timer: null
		}
	},
	methods: {
		// 切换角色
		switchRole(role) {
			this.userRole = role
		},
		
		// 发送验证码
		sendCode() {
			if (!this.phone || this.phone.length !== 11) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			
			this.codeSending = true
			this.countdown = 60
			
			// 模拟发送验证码
			setTimeout(() => {
				this.codeSending = false
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				})
			}, 1000)
			
			// 倒计时
			this.timer = setInterval(() => {
				this.countdown--
				if (this.countdown <= 0) {
					clearInterval(this.timer)
				}
			}, 1000)
		},
		
		// 协议勾选变更
		agreeChange(e) {
			this.agreed = e.detail.value.length > 0
		},
		
		// 登录处理
		handleLogin() {
			// 验证手机号
			if (!this.phone || this.phone.length !== 11) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			
			// 验证验证码
			if (!this.code || this.code.length !== 6) {
				uni.showToast({
					title: '请输入6位验证码',
					icon: 'none'
				})
				return
			}
			
			// 验证协议
			if (!this.agreed) {
				uni.showToast({
					title: '请先同意用户协议和隐私政策',
					icon: 'none'
				})
				return
			}
			
			// 模拟登录
			uni.showLoading({
				title: '登录中...'
			})
			
			setTimeout(() => {
				uni.hideLoading()
				
				// 保存用户角色信息
				uni.setStorageSync('userRole', this.userRole)
				uni.setStorageSync('userPhone', this.phone)
				
				if (this.userRole === 'provider') {
					// 喂养师可选完善资料
					uni.showModal({
						title: '登录成功',
						content: '是否现在完善资料提升接单率？也可以后续在个人中心完善',
						confirmText: '去完善',
						cancelText: '稍后',
						success: (res) => {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/certification/certification'
								})
							} else {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						}
					})
				} else {
					// 宠物主人直接进入首页
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1500)
				}
			}, 1500)
		}
	},
	
	onUnload() {
		if (this.timer) {
			clearInterval(this.timer)
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #F0F8FF 0%, #FFF0F5 100%);
	padding: 60rpx 40rpx;
}

/* Logo区域 */
.logo-section {
	text-align: center;
	margin-bottom: 80rpx;
	padding-top: 60rpx;
}

.logo-icon {
	font-size: 120rpx;
	display: block;
	margin-bottom: 30rpx;
	animation: floating 3s ease-in-out infinite;
}

.app-name {
	font-size: 40rpx;
	font-weight: 700;
	color: #333333;
	display: block;
	margin-bottom: 15rpx;
}

.app-slogan {
	font-size: 26rpx;
	color: #999999;
	display: block;
}

/* 角色选择 */
.role-tabs {
	display: flex;
	background: #FFFFFF;
	border-radius: 30rpx;
	padding: 8rpx;
	margin-bottom: 50rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.role-tab {
	flex: 1;
	padding: 25rpx 20rpx;
	text-align: center;
	border-radius: 24rpx;
	transition: all 0.3s ease;
}

.role-tab.active {
	background: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
	box-shadow: 0 4rpx 16rpx rgba(255, 182, 193, 0.3);
}

.role-icon {
	font-size: 36rpx;
	display: block;
	margin-bottom: 10rpx;
}

.role-name {
	font-size: 28rpx;
	font-weight: 600;
	color: #666666;
}

.role-tab.active .role-name {
	color: #FFFFFF;
}

/* 表单区域 */
.form-section {
	margin-bottom: 50rpx;
}

.input-group {
	margin-bottom: 30rpx;
}

.input-label {
	font-size: 28rpx;
	color: #333333;
	font-weight: 600;
	display: block;
	margin-bottom: 15rpx;
}

.input-field {
	width: 100%;
	height: 90rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 0 30rpx;
	font-size: 28rpx;
	border: 2rpx solid #F0E6FF;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.code-input-wrapper {
	display: flex;
	gap: 20rpx;
}

.code-input {
	flex: 1;
}

.send-code-btn {
	width: 200rpx;
	height: 90rpx;
	background: linear-gradient(135deg, #98E4D6 0%, #7FCDCD 100%);
	color: #FFFFFF;
	border-radius: 24rpx;
	font-size: 26rpx;
	font-weight: 600;
	border: none;
	line-height: 90rpx;
	padding: 0;
}

.send-code-btn[disabled] {
	background: #E0E0E0;
	color: #999999;
}

/* 喂养师提示 */
.provider-tip {
	display: flex;
	align-items: center;
	background: rgba(255, 182, 193, 0.1);
	border-radius: 20rpx;
	padding: 20rpx;
	margin-top: 20rpx;
}

.tip-icon {
	font-size: 32rpx;
	margin-right: 15rpx;
}

.tip-text {
	font-size: 24rpx;
	color: #FF8C42;
}

/* 登录按钮 */
.login-btn {
	width: 100%;
	height: 100rpx;
	background: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
	color: #FFFFFF;
	border-radius: 30rpx;
	font-size: 32rpx;
	font-weight: 700;
	border: none;
	box-shadow: 0 8rpx 24rpx rgba(255, 182, 193, 0.4);
	margin-bottom: 30rpx;
}

/* 协议 */
.agreement {
	text-align: center;
}

.agreement-label {
	display: flex;
	align-items: center;
	justify-content: center;
}

.agreement-text {
	font-size: 24rpx;
	color: #999999;
	margin: 0 5rpx;
}

.agreement-link {
	font-size: 24rpx;
	color: #FFB6C1;
}

@keyframes floating {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-15rpx); }
}
</style>
